<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    cancel-text="关闭"
    @ok="submit"
    @cancel="closeModal"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="汽车城名称">
          <a-input v-decorator="['name', validatorRules.name ]" placeholder="请输入汽车城名称" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="公司名称">
          <a-input v-decorator="['company', validatorRules.company ]" placeholder="请输入公司名称" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="地址">
          <a-input v-decorator="['address', validatorRules.address ]" placeholder="请输入地址" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="电话">
          <a-input v-decorator="['mobile', validatorRules.mobile ]" placeholder="请输入电话" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="汽车城图片" >
          <image-upload v-model="narrowImg" text="上传" :isMultiple="false" ></image-upload>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="省份">
          <a-input v-decorator="['province', validatorRules.province ]" placeholder="请输入省份" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="城市" >
          <a-input v-decorator="['city', validatorRules.city ]" placeholder="请输入城市" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="备注">
          <a-textarea v-decorator="['remark', {} ]" placeholder="请输入备注" :rows="2"  />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="部门排序">
          <a-input-number v-decorator="['sort', {initialValue: 999,} ]" placeholder="请输入部门排序" :min="1" :max="999" style="width: 200px" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import ApiTree from '@/api/system/dept';
import ImageUpload from '@/components/ImageUpload';
import { Slime } from '@/mixins/slime';
export default {
  name: 'carMarketUpload',
  components: { ImageUpload },
  data() {
    return {
      title: '编辑',
      form: this.$form.createForm(this),
      model:{},
      narrowImg:'',
      validatorRules: {
        name: { rules: [{ required: true, message: '请输入汽车城名称!' }] },
        company: { rules: [{ required: true, message: '请输入公司名称!' }] },
        address: { rules: [{ required: true, message: '请输入地址!' }] },
        mobile: { rules: [{ required: true, message: '请输入电话!' }] },
        province: { rules: [{ required: true, message: '请输入省份!' }] },
        city: { rules: [{ required: true, message: '请输入城市!' }] },
      },
    };
  },
  mixins: [Slime],
  methods: {
    // 增
    crudCreate() {
      this.crudUpdate({})
    },
    // 改
    crudUpdate(data) {
      this.form.resetFields()  //重新设置领域
      this.model = Object.assign({}, record)
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          name: data.name,
          company: data.company,
          address: data.address,
          mobile: data.mobile,
          img: data.img,
          province: data.province,
          city: data.city,
          remark: data.remark,
          sort: data.sort,
        });
      });
      this.narrowImg = data.img
    },
    // 提交
    submit() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let param = {...values};
          if (!this.model.id) {
            that.submitCreate(param);
          } else {
            param = {...param, id:that.id}
            that.submitUpdate(param);
          }
        }
      });
    },
    // 提交 增
    submitCreate(param) {
      const that = this;
      ApiTree.getAdd(param)
        .then((res) => {
          that.$message.success('新增成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 提交 改
    submitUpdate(param) {
      const that = this;
      ApiTree.getUpdate(param)
        .then((res) => {
          that.$message.success('编辑成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 弹窗-关闭
    closeModal() {
      this.confirmLoading = false;
      this.visible = false;
      this.form.resetFields();
      this.$emit('closeModal');
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>